<template>
  <div class="ct-table-box" ref="ctTableBoxRef">
    <el-table
      stripe
      border
      v-bind="$attrs"
      v-loading="props.options.loading"
      :data="props.options.data"
      :border="true"
      :max-height="maxHeight"
      :header-cell-style="{ background: '#f5f5f5', textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <template v-for="item in props.options.columns">
        <el-table-column
          v-bind="item"
          :key="item.prop"
          :sortable="item.sort"
          v-if="item.show === undefined ? true : item.show"
          show-overflow-tooltip
          reserve-selection
        >
          <!-- 自定义行slot -->
          <template v-if="item.isCustom" #default="scope">
            <slot
              :name="item.prop"
              :row="scope.row"
              :column="scope.column"
              :index="scope.$index"
            ></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CtTable",
};
</script>
<script setup>
const props = defineProps({
  options: {
    type: Object,
    required: true,
    default: () => {
      return {};
    },
  },
});

let maxHeight = ref(0);
const ctTableBoxRef = ref(null);

onMounted(() => {
  if (ctTableBoxRef.value) {
    maxHeight.value = ctTableBoxRef.value.offsetHeight;
  }
});
</script>

<style lang="scss" scoped>
.ct-table-box {
  height: 100%;

  :deep(.el-text) {
    cursor: pointer;
    padding: 0 10px;
  }
}
// :deep(.el-table) {
//   tr:hover > td {
//     background-color: #ebebeb !important;
//   }

//   tr {
//     background-color: rgba(63, 184, 252, 0.1);
//   }

//   tr.el-table__row--striped td.el-table__cell {
//     background-color: #fff;
//   }

//   .el-table__cell {
//     height: 60px;
//   }

//   th.el-table__cell {
//     height: 40px;
//   }
// }
</style>
